<template>
  <div class="academic-warning-page">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索班级、学号/学生姓名"
        prefix-icon="el-icon-search"
        class="search-input"
      ></el-input>
      <!-- 筛选项 -->
      <div class="filters">
        <el-select v-model="selectedClass" placeholder="请选择班级" class="filter-select" clearable>
          <el-option
            v-for="classOption in classOptions"
            :key="classOption.value"
            :label="classOption.label"
            :value="classOption.value"
          />
        </el-select>
        <el-select v-model="selectedStudent" placeholder="请选择学生" class="filter-select" clearable>
          <el-option
            v-for="student in studentOptions"
            :key="student.id"
            :label="student.name"
            :value="student.id"
          />
        </el-select>
      </div>
    </div>

    <!-- 弹出提示 -->
    <el-alert
      v-if="studentsWithIssuesCount > 0"
      :title="`当前班级有 ${studentsWithIssuesCount} 名同学学业状况需要重点关注`"
      type="warning"
      show-icon
      class="warning-alert"
      closable
    ></el-alert>

    <!-- 批量操作区域 -->
    <div class="batch-operation" v-if="selectedStudents.length > 0">
      <el-alert
        :title="`已选择 ${selectedStudents.length} 名学生`"
        type="info"
        show-icon
        class="warning-alert"
      />
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <table class="student-table">
        <thead>
          <tr>
            <th width="50"><el-checkbox @change="handleSelectAll" v-model="isAllSelected" /></th>
            <th width="120">姓名</th>
            <th width="150">学号</th>
            <th width="120">班级</th>
            <th width="150">存在问题</th>
            <th width="80">详情</th>
            <th width="80">处理</th>
            <th width="80">上报</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in paginatedStudents" :key="student.id">
            <td>
              <el-checkbox 
                :model-value="isStudentSelected(student)"
                @change="(val) => handleStudentSelect(val, student)"
              />
            </td>
            <td>
              <span v-if="student.issue !== '无'" class="warning-icon">⚠️</span>
              {{ student.name }}
            </td>
            <td>{{ student.id }}</td>
            <td>{{ student.class }}</td>
            <td :class="{ 'highlight-issue': student.issue !== '无' }">{{ student.issue }}</td>
            <td>
              <el-button type="primary" link @click="viewDetail(student)">详情</el-button>
            </td>
            <td>
              <el-button type="warning" link @click="handleIssue(student)">处理</el-button>
            </td>
            <td>
              <el-button type="danger" link @click="reportIssue(student)">上报</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部多项处理和分页 -->
    <div class="bottom-bar">
      <div class="batch-buttons">
        <el-button-group>
          <el-button type="primary" @click="handleBatchDetail">
            <el-icon><View /></el-icon>批量查看
          </el-button>
          <el-button type="warning" @click="handleBatchHandle">
            <el-icon><Edit /></el-icon>批量处理
          </el-button>
          <el-button type="danger" @click="handleBatchReport">
            <el-icon><Upload /></el-icon>批量上报
          </el-button>
        </el-button-group>
      </div>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 20, 30]"
        :total="filteredStudents.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 对话框组件 -->
    <AcademicDetailDialog ref="detailDialog" :student="currentStudent" />
    <AcademicHandleDialog ref="handleDialog" :student="currentStudent" />
    <AcademicReportDialog ref="reportDialog" :student="currentStudent" />

    <!-- 批量操作对话框 -->
    <el-dialog
      v-model="batchDialogVisible"
      :title="batchDialogTitle"
      width="70%"
      class="batch-dialog"
    >
      <div class="batch-dialog-content">
        <table class="student-table">
          <thead>
            <tr>
              <th width="120">姓名</th>
              <th width="150">学号</th>
              <th width="120">班级</th>
              <th width="150">存在问题</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="student in selectedStudents" :key="student.id">
              <td>{{ student.name }}</td>
              <td>{{ student.id }}</td>
              <td>{{ student.class }}</td>
              <td>{{ student.issue }}</td>
            </tr>
          </tbody>
        </table>
        
        <div class="batch-form" v-if="batchOperation !== 'detail'">
          <el-form :model="batchForm" label-width="100px">
            <el-form-item label="处理方式" v-if="batchOperation === 'handle'">
              <el-select v-model="batchForm.handleMethod" placeholder="请选择处理方式">
                <el-option label="一对一辅导" value="一对一辅导" />
                <el-option label="集体辅导" value="集体辅导" />
                <el-option label="家长沟通" value="家长沟通" />
                <el-option label="心理咨询" value="心理咨询" />
              </el-select>
            </el-form-item>
            <el-form-item label="上报级别" v-if="batchOperation === 'report'">
              <el-select v-model="batchForm.reportLevel" placeholder="请选择上报级别">
                <el-option label="普通" value="普通" />
                <el-option label="重要" value="重要" />
                <el-option label="紧急" value="紧急" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注说明">
              <el-input
                v-model="batchForm.remark"
                type="textarea"
                rows="4"
                placeholder="请输入批量处理的备注说明"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="batchDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmBatchOperation" v-if="batchOperation !== 'detail'">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { View, Edit, Upload } from '@element-plus/icons-vue';
import AcademicDetailDialog from './components/AcademicDetailDialog.vue';
import AcademicHandleDialog from './components/AcademicHandleDialog.vue';
import AcademicReportDialog from './components/AcademicReportDialog.vue';
import { generateStudentData, classOptions } from '../studentData';
import { ElMessage } from 'element-plus';

// 学生数据
const students = ref([]);

// 初始化学生数据
students.value = generateStudentData().map(student => ({
  ...student,
  issue: student.academicIssue
}));

// 分页控制
const currentPage = ref(1);
const pageSize = ref(10);

// 搜索和筛选
const searchQuery = ref('');
const selectedClass = ref('');
const selectedStudent = ref('');

// 学生选项
const studentOptions = computed(() => {
  return students.value.map(student => ({
    id: student.id,
    name: student.name
  }));
});

// 选中的学生
const selectedStudents = ref([]);
const currentStudent = ref({});
const isAllSelected = ref(false);

// 检查学生是否被选中
const isStudentSelected = (student) => {
  return selectedStudents.value.some(s => s.id === student.id);
};

// 对话框引用
const detailDialog = ref(null);
const handleDialog = ref(null);
const reportDialog = ref(null);

// 批量操作相关
const batchDialogVisible = ref(false);
const batchOperation = ref('');
const batchDialogTitle = computed(() => {
  const titles = {
    detail: '批量查看学生详情',
    handle: '批量处理学业问题',
    report: '批量上报学业问题'
  };
  return titles[batchOperation.value] || '';
});

const batchForm = ref({
  handleMethod: '',
  reportLevel: '',
  remark: ''
});

// 筛选后的学生数据
const filteredStudents = computed(() => {
  let result = students.value;
  
  if (searchQuery.value) {
    const search = searchQuery.value.toLowerCase();
    result = result.filter(student => 
      student.name.toLowerCase().includes(search) ||
      student.id.toLowerCase().includes(search) ||
      student.class.toLowerCase().includes(search)
    );
  }
  
  if (selectedClass.value) {
    result = result.filter(student => student.class === selectedClass.value);
  }

  if (selectedStudent.value) {
    result = result.filter(student => student.id === selectedStudent.value);
  }
  
  return result;
});

// 分页后的学生数据
const paginatedStudents = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return filteredStudents.value.slice(start, start + pageSize.value);
});

// 有问题的学生数量
const studentsWithIssuesCount = computed(() => {
  return filteredStudents.value.filter((student) => student.issue !== '无').length;
});

// 选择相关方法
const handleSelectAll = (val) => {
  if (val) {
    // 将当前页面上未选择的学生添加到选中列表中
    paginatedStudents.value.forEach(student => {
      if (!selectedStudents.value.some(s => s.id === student.id)) {
        selectedStudents.value.push(student);
      }
    });
  } else {
    // 从选中列表中移除当前页面上的学生
    selectedStudents.value = selectedStudents.value.filter(student => 
      !paginatedStudents.value.some(s => s.id === student.id)
    );
  }
  isAllSelected.value = val;
};

const handleStudentSelect = (val, student) => {
  if (val) {
    if (!selectedStudents.value.some(s => s.id === student.id)) {
      selectedStudents.value.push(student);
    }
  } else {
    selectedStudents.value = selectedStudents.value.filter(s => s.id !== student.id);
  }
  // 更新全选状态
  isAllSelected.value = paginatedStudents.value.every(student => 
    selectedStudents.value.some(s => s.id === student.id)
  );
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  selectedStudents.value = [];
  isAllSelected.value = false;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  selectedStudents.value = [];
  isAllSelected.value = false;
};

// 单个学生操作
const viewDetail = (student) => {
  currentStudent.value = student;
  detailDialog.value.show();
};

const handleIssue = (student) => {
  currentStudent.value = student;
  handleDialog.value.show();
};

const reportIssue = (student) => {
  currentStudent.value = student;
  reportDialog.value.show();
};

// 批量操作方法
const handleBatchDetail = () => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请先选择学生');
    return;
  }
  batchOperation.value = 'detail';
  batchDialogVisible.value = true;
};

const handleBatchHandle = () => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请先选择学生');
    return;
  }
  batchOperation.value = 'handle';
  batchDialogVisible.value = true;
  batchForm.value = {
    handleMethod: '',
    reportLevel: '',
    remark: ''
  };
};

const handleBatchReport = () => {
  if (selectedStudents.value.length === 0) {
    ElMessage.warning('请先选择学生');
    return;
  }
  batchOperation.value = 'report';
  batchDialogVisible.value = true;
  batchForm.value = {
    handleMethod: '',
    reportLevel: '',
    remark: ''
  };
};

const confirmBatchOperation = () => {
  if (batchOperation.value === 'handle') {
    if (!batchForm.value.handleMethod) {
      ElMessage.warning('请选择处理方式');
      return;
    }
    // 处理逻辑
    selectedStudents.value.forEach(student => {
      const index = students.value.findIndex(s => s.id === student.id);
      if (index !== -1) {
        students.value[index].issue = '已处理';
      }
    });
    ElMessage.success(`已成功处理 ${selectedStudents.value.length} 名学生的学业问题`);
  } else if (batchOperation.value === 'report') {
    if (!batchForm.value.reportLevel) {
      ElMessage.warning('请选择上报级别');
      return;
    }
    // 上报逻辑
    selectedStudents.value.forEach(student => {
      const index = students.value.findIndex(s => s.id === student.id);
      if (index !== -1) {
        students.value[index].issue = '已上报';
      }
    });
    ElMessage.success(`已成功上报 ${selectedStudents.value.length} 名学生的学业问题`);
  }
  
  batchDialogVisible.value = false;
  selectedStudents.value = [];
  isAllSelected.value = false;
};
</script>


<!--样式-->
<style lang="less" scoped>
.academic-warning-page {
  padding: 20px;
  background-color: #fff;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  .search-input {
    width: 300px;
    margin-right: 20px;
  }

  .filters {
    display: flex;
    gap: 15px;
    margin-right: 20px;
  }

  .filter-select {
    width: 150px;
  }
}

.warning-alert {
  margin-bottom: 15px;
}

.table-container {
  flex: 1;
  margin: 0 0 15px 0;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: auto;
  min-height: 0;
  height: calc(100% - 120px);
}

.student-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 14px;

  th, td {
    padding: 12px 8px;
    border: 1px solid #EBEEF5;
    height: 24px;
    line-height: 24px;
  }

  th {
    background-color: #F5F7FA;
    color: #606266;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  td {
    color: #606266;
  }

  .el-checkbox {
    margin: 0;
  }

  tbody tr {
    transition: background-color 0.25s ease;

    &:hover {
      background-color: #F5F7FA;
    }

    &:nth-child(even) {
      background-color: #FAFAFA;
    }
  }

  .highlight-issue {
    color: #F56C6C;
    font-weight: 500;
  }

  .warning-icon {
    color: #E6A23C;
    margin-right: 4px;
  }

  .el-button {
    padding: 4px 8px;
    font-size: 13px;
    
    &.el-button--primary {
      color: #409EFF;
    }
    
    &.el-button--warning {
      color: #E6A23C;
    }
    
    &.el-button--danger {
      color: #F56C6C;
    }
    
    &:hover {
      opacity: 0.8;
    }
  }
}

.bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  background-color: #fff;
  border-top: 1px solid #EBEEF5;
  margin-top: auto;
  position: relative;
  z-index: 10;

  .batch-buttons {
    .el-button-group {
      display: flex;
      gap: 10px;

      .el-button {
        display: inline-flex;
        align-items: center;
        padding: 8px 15px;
        cursor: pointer !important;
        border: 1px solid;
        border-radius: 4px;
        transition: all 0.3s;
        position: relative;
        z-index: 11;
        pointer-events: auto;
        
        &.el-button--primary {
          background-color: #409EFF;
          border-color: #409EFF;
          color: #fff;
          
          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }
        
        &.el-button--warning {
          background-color: #E6A23C;
          border-color: #E6A23C;
          color: #fff;
          
          &:hover {
            background-color: #ebb563;
            border-color: #ebb563;
          }
        }
        
        &.el-button--danger {
          background-color: #F56C6C;
          border-color: #F56C6C;
          color: #fff;
          
          &:hover {
            background-color: #f78989;
            border-color: #f78989;
          }
        }

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  .el-pagination {
    margin-left: auto;
  }
}

.batch-buttons {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

.batch-dialog {
  .batch-dialog-content {
    padding: 20px 0;
  }

  .batch-form {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #EBEEF5;
  }

  .el-form {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
